<template>
  <!-- 补货清单弹出框 -->
  <div class="list" style="height: 300px">
    <el-dialog
      title="区域详情"
      :visible="detailsVisible"
      width="40%"
      @open="opneDialog"
      @close="closeDialog"
    >
      <el-form label-width="120px">
        <el-form-item label="区域名称:">
          <span>{{ item.name }}</span>
        </el-form-item>
        <el-form-item label="包含点位:">
          <!-- 表格 -->
          <el-table
            :data="list"
            style="width: 80%"
            :header-cell-style="{
              fontWeight: 'normal',
              background: '#f3f6fb',
            }"
          >
            <el-table-column label="序号" type="index" />
            <el-table-column label="点位名称" prop="name" />
            <el-table-column label="设备数量" prop="vmCount" />
          </el-table>
          <!-- 分页 -->
          <el-row v-if="totalCount>10" type="flex" justify="space-between" align="middle">
            <el-col :span="12">
              <p class="paginationHeader">
                {{ `共${totalCount}条记录 第${page.pageIndex}/${totalPage}页` }}
              </p>
            </el-col>
            <el-col :span="12">
              <el-pagination
                background
                :current-page="page.pageIndex"
                :page-size="page.pageSize"
                :total="totalCount"
                layout="prev, next"
                prev-text="上一页"
                next-text="下一页"
                @current-change="changePage"
              />
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { Nodesearch } from '@/api/node'
export default {
  props: {
    detailsVisible: {
      type: Boolean,
      default: () => {}
    },
    item: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      list: [],
      page: {
        pageIndex: 1,
        pageSize: 10
      },
      totalCount: 0,
      totalPage: 0
    }
  },
  methods: {
    // 然后渲染页面
    async opneDialog() {
      this.Nodesearch()
    },
    // 2.关闭弹出层触发父组件自定义事件
    closeDialog() {
      this.$emit('closeDialog')
    },
    // 页码
    changePage(val) {
      this.page.pageIndex = val
      this.Nodesearch()
    },
    async Nodesearch() {
      this.page.regionId = this.item.id
      const { data } = await Nodesearch(this.page)
      this.list = data.currentPageRecords
      this.totalCount = Number(data.totalCount)
      this.totalPage = Number(data.totalPage)
    }
  }
}
</script>

<style lang="scss">
.list {
  .el-dialog {
    border-radius: 10px;
    .el-dialog__header .el-dialog__title {
      color: #333333;
      font-size: 16px;
      font-weight: bold;
    }
    .el-dialog__header {
      border-radius: 10px;
      background-color: #fff;
    }
    .el-icon-close:before {
      color: #909399;
    }
    .el-dialog__body {
      padding: 15px 20px;
    }
  }
  .el-table {
    position: unset;
  }
  .el-table thead {
    color: #666666 !important;
  }
  .el-table td,
  .el-table th.is-leaf {
    border-bottom: 0 !important;
  }
  .el-table--fit {
    margin-top: 10px;
  }
  .el-table td {
    padding: 5px;
  }
  .el-table td,
  .el-table th {
    padding: 0;
  }
  .paginationHeader {
    font-size: 16px;
    color: #dbdfe5;
    padding-left: 8px;
  }

  .el-pagination button:disabled {
    width: 70px;
    height: 32px;
  }
  .el-pagination .btn-next,
  .el-pagination .btn-prev {
    width: 70px;
    height: 32px;
  }
}
</style>
